// NumberCard.vue组件文件
<template>
  <div class="demo">
    <ul class="fp-box">
      <!-- 默认进来是6位，超过自动加 -->
      <li
          ref="li"
          v-for="i in countStr.length > 6 ? countStr.length : 6"
          :key="i"
      >
        <!-- 每列中的10行数字 -->
        <span v-for="num in 10" :key="num" class="num-wrap">
          <span>{{ num - 1 }}</span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    countStr: String,
  },
  data() {
    return {
      numberArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], //固定每列中的19行数字
      numStr: "", // 需要展示的数字字符串
      numArr: [0, 0, 0, 0, 0, 0], //默认展示6个数字数组
      // countStr: "", // 需要展示的数字
    };
  },
  mounted() {
    this.initNumCard();
  },
  methods: {
    // 初始化数字卡片
    initNumCard(num) {
      this.numStr = num || this.countStr;
      this.numArr = this.numStr.split("");
      let numArrlen = this.numArr.length;
      // 展示数字的处理，不够7位前面补0
      // 默认进来是7位，超过自动加
      for (
          let i = 0;
          i < (this.countStr.length > 6 ? this.countStr.length : 6) - numArrlen;
          i++
      ) {
        this.numArr.unshift(0);
      }
      this.$refs.li.forEach((item, index) => {
        let ty = this.numArr[index];
        // 滚动数字(li标签)
        item.style.transform = `translateY(-${ty * 30}px)`;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.fp-box {
  display: flex;
  overflow: hidden;
  li {
    width: 30px;
    height: 30px;
    flex-direction: column;
    transition: transform 1s ease-in-out;
    margin-right: 4px;
    & > span {
      text-align: center;
      font-size: 16px;
      color: #ffffff;
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 29px;
      float: left;
      position: relative;
      font-family: sans-serif,serif;
    }
    .num-wrap {
      background: #294fb0;
      border: 1px solid #82a4ff;
      display: inline-block;
      padding: 0 10px;
      border-radius: 1px;
      font-family: sans-serif;
      font-weight: bolder;
    }
  }
}
</style>
